<template>
  <div class="gift-container bottomtab-page">
    <div class="header-img">
      <div class="swiper-wrapper">
        <swiper
          height="190px"
          auto
          loop
          :show-dots="false"
          :list="swiperList"
          v-model="swiperIndex"
          @on-index-change="swiperChange"
        ></swiper>
      </div>
    </div>

    <div class="gift-content">
      <swiper :aspect-ratio="100/800" height="1400px" loop :show-dots="false">
        <swiper-item class="gift-swiper-item">
          <div class="tencent-video">
            <div class="icon">
              <img :src="iconList[0]" alt="" srcset="">
            </div>
            <div class="content">
              <div class="title">
                <span class="name">微信公众号</span>
                <span class="count"></span>
              </div>
              <div class="howtoget">获取路径： 公众号 - 福利活动</div>
            </div>
            <div class="actions">
              <div class="btn">前往领取</div>
            </div>
          </div>
          <div class="gift-wrapper" v-for="(item, i) of pubAcc" :key="'pubAcc' + i">
            <div class="title">{{item.title}}</div>
            <div class="content">
              <div
                class="item"
                v-for="(gift, j) of item.content"
                :key="
        'pubAcc' + j"
              >{{gift}}</div>
            </div>
          </div>
        </swiper-item>
        <swiper-item class="gift-swiper-item">
          <div class="tencent-video">
            <div class="icon">
              <img :src="iconList[1]" alt="" srcset="">

            </div>
            <div class="content">
              <div class="title">
                <span class="name">腾讯视频</span>
                <span class="count"></span>
              </div>
              <div class="howtoget">获取路径：个人中心→爱玩游戏中心→礼包中心</div>
            </div>
            <div class="actions">
              <div class="btn">前往领取</div>
            </div>
          </div>
          <div class="gift-wrapper" v-for="(item, i) of tencentVideo" :key="'tencentVideo' + i">
            <div class="title">{{item.title}}</div>
            <div class="content">
              <div
                class="item"
                v-for="(gift, j) of item.content"
                :key="
        'tencentVideo' + j"
              >{{gift}}</div>
            </div>
          </div>
        </swiper-item>
        <swiper-item class="gift-swiper-item">
          <div class="tencent-video">
            <div class="icon">
              <img :src="iconList[2]" alt="" srcset="">

            </div>
            <div class="content">
              <div class="title">
                <span class="name">应用宝</span>
                <span class="count"></span>
              </div>
              <div class="howtoget">获取路径： 搜索王者荣耀→ 游戏专区→ 更多礼包</div>
            </div>
            <div class="actions">
              <div class="btn">前往领取</div>
            </div>
          </div>
          <div class="gift-wrapper" v-for="(item, i) of appCenter" :key="'appCenter' + i">
            <div class="title">{{item.title}}</div>
            <div class="content">
              <div
                class="item"
                v-for="(gift, j) of item.content"
                :key="
        'appCenter' + j"
              >{{gift}}</div>
            </div>
          </div>
        </swiper-item>
        <swiper-item class="gift-swiper-item">
          <div class="tencent-video">
            <div class="icon">
              <img :src="iconList[3]" alt="" srcset="">

            </div>
            <div class="content">
              <div class="title">
                <span class="name">腾讯QQ</span>
                <span class="count"></span>
              </div>
              <div class="howtoget">获取路径： 动态→ 游戏→ 王者荣耀专区</div>
            </div>
            <div class="actions">
              <div class="btn">前往领取</div>
            </div>
          </div>
          <div class="gift-wrapper" v-for="(item, i) of qq" :key="'qq' + i">
            <div class="title">{{item.title}}</div>
            <div class="content">
              <div class="item" v-for="(gift, j) of item.content" :key="
        'qq' + j">{{gift}}</div>
            </div>
          </div>
        </swiper-item>
        <swiper-item class="gift-swiper-item">
          <div class="tencent-video">
            <div class="icon">
              <img :src="iconList[4]" alt="" srcset="">

            </div>
            <div class="content">
              <div class="title">
                <span class="name">腾讯微信</span>
                <span class="count"></span>
              </div>
              <div class="howtoget">获取路径： 发现→ 游戏→ 王者荣耀专区</div>
            </div>
            <div class="actions">
              <div class="btn">前往领取</div>
            </div>
          </div>
          <div class="gift-wrapper" v-for="(item, i) of wechat" :key="'wechat' + i">
            <div class="title">{{item.title}}</div>
            <div class="content">
              <div
                class="item"
                v-for="(gift, j) of item.content"
                :key="
        'wechat' + j"
              >{{gift}}</div>
            </div>
          </div>
        </swiper-item>
      </swiper>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      iconList: ['wechat', 'tencentVideo', 'appCenter', 'qq', 'wechat'].map((item)=>(require(`../../assets/images/gift/${item}.png`))),
      swiperList: [
        {
          url: "/articledetails?article=damo",
          img: require("../../assets/images/gift/damo.jpg"),
          title: ""
        },
        {
          url: "/articledetails?article=zhuangzhou",
          img: require("../../assets/images/gift/zhuangzhou.jpg"),
          title: ""
        }
      ],
      swiperIndex: 0,
      tencentVideo: [
        {
          title: "本周签到礼包",
          content: [
            "1胜经验卡X1",
            "王昭君（1天）X1",
            "王昭君-精灵公主（1天）X1",
            "1胜经验卡X2",
            "露娜啊（1天）X1",
            "蔡文姬-蔷薇王座（1天）X1",
            "露娜-绯红之月（3天）X1"
          ]
        },

        {
          title: "新用户注册礼包",
          content: ["钻石X18", "1胜经验卡X1"]
        },
        {
          title: "赛事冠军礼包",
          content: ["钻石X58", "公孙离（永久）X1", "公孙离-花间舞（7天）X1"]
        },
        {
          title: "每日启动礼包",
          content: ["夏侯惇1天 X1"]
        },
        {
          title: "每日礼包",
          content: ["1胜经验卡X1", "小喇叭X1"]
        },
        {
          title: "每周礼包",
          content: ["1胜经验卡X2", "钻石X5", "百里守约（1天）X1"]
        },
        {
          title: "星座每周礼包",
          content: ["钻石X5", "王昭君-精灵公主（1天）X1", "1胜经验卡X1"]
        },
        {
          title: "精英专属礼包",
          content: ["钻石X5", "1胜经验卡X1", "雅典奶（1天）X1"]
        },
        {
          title: "独家礼包",
          content: [
            "1胜利经验卡X1",
            "钻石X5",
            "杨玉环（1天）X1",
            "杨玉环-霓裳舞曲（1天）X1"
          ]
        },
        {
          title: "V1青铜会员每日礼包",
          content: ["铭文碎片X5", "钻石X5", "小喇叭X1"]
        },
        {
          title: "V2白银会员礼包",
          content: ["1胜经验卡X1", "钻石X38", "公孙离（1天）X1"]
        },
        {
          title: "V4铂金会员礼包",
          content: [
            "公孙离（3天）X1",
            "公孙离-花间舞（3天）X1",
            "双倍经验卡1日X1",
            "小喇叭X1"
          ]
        }
      ],
      appCenter: [
        {
          title: "签到礼包",
          content: [
            "刘备（1天）X1",
            "蔡文姬（1天）X1",
            "钟馗（1天）X1",
            "扁鹊（1天）X1",
            "东皇太一（1天）X1",
            "典韦（1天）X1"
          ]
        },
        {
          title: "新注册礼包",
          content: ["钻石X38", "王昭君（1天）X1", "王昭君-精灵公主（1天）X1"]
        },
        {
          title: "5级礼包",
          content: ["钻石X5", "1胜经验卡X1"]
        },
        {
          title: "10级礼包",
          content: ["钻石X10", "小喇叭X1"]
        },
        {
          title: "20级礼包",
          content: ["钻石X15", "双倍经验卡X1"]
        },
        {
          title: "30级礼包",
          content: ["钻石X20", "诸葛亮（1天）X1"]
        },
        {
          title: "新手第二日登录",
          content: ["后羿（1天）X1", "孙尚香（1天）X1"]
        },
        {
          title: "新手第三日登录",
          content: ["小乔（1天）X1", "周瑜（1天）X1"]
        },
        {
          title: "新手第七日登录",
          content: ["诸葛亮（1天）X1", "诸葛亮星航指挥官（1天）X1"]
        },
        {
          title: "周一登录礼包",
          content: ["夏侯惇（1天）X1"]
        }
      ],
      qq: [
        {
          title: "签到礼包",
          content: [
            "杨玉环（1天）X1",
            "杨玉环-霓裳舞曲（1天）X1",
            "孙策（1天）X1",
            "孙策-海之征途（1天）X1",
            "干将莫邪（1天）X1",
            "干将莫邪-第七人偶（1天）X1",
            "李白（3天）X1",
            "李白-范海辛（3天）X1"
          ]
        },
        {
          title: "周日假日礼包",
          content: ["露娜-哥特玫瑰（3天）X1"]
        },
        {
          title: "周六假日礼包",
          content: ["张飞-五福同心（3天）X1"]
        },
        {
          title: "下载礼包",
          content: ["元歌（7天）X1", "明世隐（7天）X1", "钻石X88"]
        },
        {
          title: "新手礼包",
          content: ["芈月（1天）X1", "高渐离（1天）X1", "钻石X38"]
        },
        {
          title: "每日MVP",
          content: ["诸葛亮（1天）X1", "诸葛亮-星航指挥官（1天）X1"]
        },
        {
          title: "匹配胜利一局",
          content: ["阿珂（1天）X1"]
        },
        {
          title: "排位胜利一局",
          content: ["狄仁杰（1天）X1"]
        },
        {
          title: "周六定制好礼",
          content: ["刘备-汉召烈帝（1天）X1"]
        },
        {
          title: "周日定制好礼",
          content: ["公孙离-花间舞（1天）X1"]
        },
        {
          title: "王者开通礼包",
          content: ["铭文碎片X20", "太乙真人（1天）X2"]
        }
      ],
      wechat: [
        {
          title: "签到礼包",
          content: [
            "夏侯惇（1天）X1",
            "夏侯惇-战争骑士（1天）X1",
            "兰陵王（1天）X1",
            "兰陵王-隐刃（1天）X1",
            "诸葛亮（3天）X1",
            "诸葛亮-星航指挥官（3天）X1",
            "李元芳（3天）X1"
          ]
        },
        {
          title: "一周连续7天签到礼包",
          content: ["李元芳-特种部队（3天）X1", "钻石X18"]
        },
        {
          title: "每日匹配礼包",
          content: ["白起（1天）X1"]
        },
        {
          title: "每日排位礼包",
          content: ["钟无艳（1天）X1"]
        },
        {
          title: "周一礼包",
          content: ["钻石X5", "铭文碎片X5"]
        },
        {
          title: "VIP1每周礼包",
          content: ["钻石X5", "铭文碎片X5"]
        },
        {
          title: "VIP2每周礼包",
          content: ["钻石X10", "铭文碎片X10"]
        },
        {
          title: "VIP5每周礼包",
          content: ["钻石X5", "铭文碎片X15"]
        },
        {
          title: "VIP7每周礼包",
          content: ["钻石X5", "铭文碎片X20"]
        },
        {
          title: "下载注册礼包",
          content: ["钻石X38", "貂蝉（1天）X1", "小乔（1天）X1"]
        },
        {
          title: "微信电竞新手礼包",
          content: ["黄忠（3天）X1", "黄忠-芝加哥（3天）X1"]
        },
        {
          title: "微信电竞观看礼包",
          content: ["曹操（1天）X1"]
        },
        {
          title: "微信电竞订阅礼包",
          content: ["东皇太一（3天）X1", "东海龙王（3天）X1"]
        },
        {
          title: "KPL订阅礼包",
          content: ["貂蝉（3天）X1", "貂蝉-异域舞娘（3天）X1"]
        },
        {
          title: "周六专属礼包",
          content: ["孙尚香（1天）X1"]
        },
        {
          title: "周日专属礼包",
          content: ["刘备（1天）X1"]
        },
        {
          title: "每日MVP礼包",
          content: ["鬼谷子（1天）X1", "鬼谷子-阿摩司公爵(1天)X1"]
        },
        {
          title: "游戏圈关注礼包",
          content: ["钻石X10", "1胜经验卡X1"]
        },
        {
          title: "公众号关注",
          content: ["铭文碎片X28"]
        },
        {
          title: "5级礼包",
          content: ["刘禅（1天）X1", "刘禅-英喵野望（1天）X1"]
        },
        {
          title: "6级礼包",
          content: ["后羿（1天）X1", "后羿-精灵王（1天）X1"]
        },
        {
          title: "10级礼包",
          content: ["孙膑（1天）X1", "孙膑-天使之翼（1天）X1"]
        },
        {
          title: "20级礼包",
          content: ["钟无艳（3天）X1", "钟无艳-生化警戒（1天）X1"]
        },
        {
          title: "30级礼包",
          content: ["鲁班七号（3天）X1", "鲁班七号-木偶奇遇记（3天）X1"]
        }
      ],
      pubAcc: [
        {
          title: "每日签到",
          content: ["铭文碎片X15"]
        },
        {
          title: "签到3天",
          content: ["铭文碎片X30"]
        },
        {
          title: "签到5天",
          content: ["钻石X88"]
        },
        {
          title: "签到7天",
          content: ["英雄碎片X1"]
        },
        {
          title: "签到12天",
          content: ["皮肤碎片X1"]
        },
        {
          title: "每日一题（抽奖）",
          content: [
            "钻石X10",
            "李白-千年之狐（永久）",
            "铭文碎片X30",
            "钻石X188",
            "英雄碎片X1",
            "铭文碎片X10"
          ]
        }
      ]
    };
  },
  mounted() {},
  methods: {
    swiperChange() {
      console.log(7);
    },
    swiperClicked() {
      console.log(7);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.gift-container {
  position: relative;
  .header-img {
    height: 180px;
    width: 100%;
    top: 0;
    left: 0;
    position: fixed;
    z-index: 999;
  }
  .gift-content {
    height: 100%;
    padding-top: 170px;
  }
  .tencent-video {
    height: 5rem;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .icon {
      flex: 4;
       display: flex;
    justify-content: center;
    align-items: center;
      img {
        position: relative;
        top: 4px;
        width: 2.6rem;
        // height: 2.8rem;
      }
    }
    .content {
      flex: 10;
      .title {
        .name {
          font-size: 0.9rem;
          font-weight: bold;
        }
        .count {
          font-size: 0.6rem;
        }
      }
      .howtoget {
        font-size: 0.6rem;
      }
    }
    .actions {
      flex: 4;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0 4px;
      .btn {
        text-align: center;
        background-color: #22bd56;
        color: white;
        font-size: 0.76rem;
        padding: 2px 4px;
        width: 100%;
        height: 90%;
        border: 1px solid #056e28;
        border-radius: 6px;
      }
    }
  }

  .gift-wrapper {
    padding-left: 1rem;
    .title {
      font-size: 0.8rem;
      font-weight: bolder;
    }
    .content {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      .item {
        white-space: nowrap;
        flex-basis: 30%;
        font-size: 0.68rem;
        margin: 6px 2px;
      }
    }
  }
  .gift-swiper-item {
    margin-bottom: 2rem;
  }
}
</style>
